<template>
	<view class="delivery" :data-theme="theme">
		<view class="print_header">
			<view class="u-alert-item u-demo-block__content">
				<view>
					{{description}}
				</view>
			</view>
			<!-- 交货状态 -->
			<view>
				<!-- 	<tab-bar style="background-color: #FFF;" :tabList="tabList" :tabIndex.sync="currentIndex"></tab-bar> -->
				<u-tabs :scrollable="false" :list="tabList" :current="currentIndex" @click="tabClick"
					:activeStyle="{color:bgColor}" :lineColor="bgColor">
				</u-tabs>
			</view>
			<view style="padding: 24rpx 24rpx;display: flex;align-items: center;justify-content: space-between;">
				<view class="search-demo" style="flex: 1;">
					<u-search placeholder="商品名称" shape="square" bgColor="#f5f5f5" :showAction="false" v-model="keyword"
						@custom="searchProduct" @search="searchProduct" style="flex: none;"></u-search>
				</view>

				<view style="display: flex;justify-content: center;margin: 0 20rpx;"
					:style="{color:showUpClassPopup?bgColor:null}" @click="showUpClassPopup = true">
					<view style="font-size: 26rpx;margin:0 6rpx;">{{subNameValue?subNameValue:'分类'}}</view>
					<u-icon :name="showUpClassPopup?'arrow-up-fill':'arrow-down-fill'" size="10"
						:color="showUpClassPopup?bgColor:''"></u-icon>
				</view>
			</view>
		</view>
		<view class="table-head">
			<view class="table_head_top">
				<text>{{depotName}}</text>
				<text>{{deliveryTime}}</text>
			</view>
			<view class="table_head_bottom">
				<view>
					<text>应送货{{totalDelivery}}</text>
					<text>已收货{{totalDelivery - totalReceiving}}</text>
					<text class="toBeDeliver">待交货{{totalReceiving}}</text>
				</view>
				<view @click="configureDriver">
					<text>{{driverName?driverName:'未配置司机'}}</text>
				</view>
			</view>
		</view>
		<!-- 交货进度信息 -->
		<swiper class="tab-view" :duration="300" :current.sync="currentIndex">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view scroll-y="true" class="print_center" style="height: 100%; overflow: hidden;"
					@scrolltolower="scrolltolowerFn">
					<swiper-delivery-page class="swiper-page" :tab="tab" :deliveryTaskNumber="deliveryTaskNumber"
						:bgColor="bgColor" ref="tab" @goChargeSchedule="goChargeSchedule"></swiper-delivery-page>
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="警告" content="请先前往配置司机"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<tui-drawer mode="bottom" :visible="showUpClassPopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="classTitle"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>商品类目
					<!-- <text @click="ComuleClassValue" class="iconfontRight">确认</text> -->
				</view>
				<view class="categories">
					<!-- 左侧：一级分类 -->
					<scroll-view class="primary" scroll-y>
						<radio-group>
							<view class="item" v-for="(item,index) in categroyData" :key="index"
								@click="selectCategory(item,index)" :class="{ active: index === selectedCategory }">
								<text class="name">{{item.name}}</text>
								<view>
									<radio :value="JSON.stringify(item.id)" :color="bgColor" iconColor="bgColor"
										:checked="index === selectedCategory" />
								</view>
							</view>
						</radio-group>
					</scroll-view>
				</view>
			</view>
		</tui-drawer>
		<tui-drawer mode="bottom" :visible="showEstimatedRevenue" @close="showEstimatedRevenue = false">
			<view class="driver_nsure">
				<view @click="showEstimatedRevenue = false" class="title">司机配送列表<text
						class="iconfont icon-guanbi5"></text></view>
				<view style="height: auto;padding-top: 20rpx; margin: 0 40rpx;">
					<view>
						<radio-group v-model="deliverValue" @change="radioChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in addressList" :key="index">
								<view>
									<radio :value="item.driverId" :checked="index == deliverIndex"/>
								</view>
								<view style="line-height: 19px;">{{item.driverName}}</view>
							</label>
						</radio-group>
						
					</view>
					<view style="width: 100%;margin-top: 80rpx;">
						<button @click="closeRevenue" class="bg_color"
							style="border-radius: 10px;padding: 20rpx;color: #fff;">选好了</button>
					</view>
				</view>
			</view>
		</tui-drawer>
		
	</view>
</template>

<script>
	import {
		getDriverListApi,upDateDriveryApi
	} from '@/api/delivery.js';
	import {
		getListAllApi
	} from '@/api/category.js';
	import swiperDeliveryPage from "./common/nuve-swiper-delivery-page.nvue";
	import tabBar from './common/tab-bar.vue';
	import tuiDrawer from './common/tui-drawer/index.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tabBar,
			swiperDeliveryPage,
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				description: '已收货: 仓商双方认可的交接数量',
				tabList: [],
				currentIndex: 0,
				keyword: '',
				// ---------------分类弹窗
				tableForm: {
					hidden: 1,
					parentId: 0,
				},
				categroyData: [{
					name: '',
					sonList: [],
				}],
				detailForm: {
					current: 1,
					size: 10,
				},
				showUpClassPopup: false,
				subNameValue: '',
				selectedCategory: 0,
				deliveryTaskNumber: null,
				totalReceiving: '',
				totalDelivery: '',
				depotName: '',
				deliveryTime: '',
				// -------------交货进度查询司机---------
				deliverForm: {
					current: 1,
					size: 10,
				},
				addressList: [],
				deliverValue:'',
				deliverIndex:0,
				driverIdValue:'',
				type: 'center',
				msgType: 'success',
				driverName:'',
				showEstimatedRevenue: false,
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					name: "全部",
					deliveryStatus: '',
				},
				{
					id: "tab12",
					name: "未完成",
					deliveryStatus: 0,
				},
				{
					id: "tab13",
					name: "交货完成",
					deliveryStatus: 1,
				},
			];
			let data = JSON.parse(options.data);
			this.deliveryTime = options.deliveryTime;
			this.deliveryTaskNumber = data.deliveryTaskNumber;
			this.totalReceiving = data.totalReceivingNumber;
			this.totalDelivery = data.totalDeliveryNumber;
			this.depotName = data.depotName;
			this.driverName = data.driverName;
			console.log('data', data, this.totalDelivery, this.totalReceiving)
			this.getClassList();
			// if (data.driverId == null) {
			// 	this.dialogToggle('warn')
			// } //司机信息列表
			this.getAddressList();
		},
		methods: {
			openAreate(){
				this.$refs.alertDialog.open()
			},
			dialogToggle(type) {
				this.msgType = type;
				this.openAreate();
			},
			dialogConfirm() {
				this.goPage(`/pages/disDriver/deliverList/deliverList`);
			},
			dialogClose() {
				console.log('点击关闭')
			},
			// 配置司机弹窗
			configureDriver(){
				this.showEstimatedRevenue = true;
			},
			/**
			 * 获取司机列表
			 *
			 */
			getAddressList: function(isPage) {
				let that = this;
				getDriverListApi(this.deliverForm).then(res => {
					that.addressList = res.data.records;
				}).catch(err => {
					console.log(err)
				});
			},
			radioChange(n) {
				console.log(n)
				let radioValue = n.detail.value;
				this.driverIdValue = radioValue;
			},
			// 确认修改司机
			closeRevenue(){
				if(this.driverIdValue == ''){
					this.driverIdValue = this.addressList[0].id
				}
				let deliveryDate = {
					driverId:this.driverIdValue,
					deliveryTaskNumber:this.deliveryTaskNumber,
					depotId:this.depotId,
				}
				upDateDriveryApi(deliveryDate).then((res) => {
					console.log(res)
					that.$util.Tips({
						title: '修改成功',
						icon: 'success'
					});
				}).catch(err => {
					console.log(err)
				});
				this.showEstimatedRevenue = false;
			},
			

			async getClassList() {
				const res = await getListAllApi(this.tableForm);
				// 要插入的新对象
				let newObj = {
					name: "全部",
					id: -1
				};
				this.categroyData = res.data;
				this.categroyData.unshift(newObj);
			},
			// 关闭分类弹窗
			closeComuleDate() {
				this.showUpClassPopup = false;
			},
			//一级分类目录选择点击事件
			selectCategory(item, ind) {
				this.selectedCategory = ind;
				if (item.id == -1) {
					this.subNameValue = '';
				} else {
					this.subNameValue = item.name;
				}
				this.$refs.tab[this.currentIndex].classTypeProduct(item.id);
				this.showUpClassPopup = false;
			},
			tabClick(item) {
				this.currentIndex = item.index;
			},
			//搜索商品
			searchProduct(value) {
				//调用当前选择的类型页面查询方法
				this.$refs.tab[this.currentIndex].searchProduct(value);
			},


			//滚动加载更多
			scrolltolowerFn() {
				this.$refs.tab[this.currentIndex].scrolltolowerFn();
			},
			goChargeSchedule(item) {
				console.log('item', item)
				this.goPage(
					`/pages/deliverySchedule/chargeSchedule/chargeSchedule?deliveryTaskNumber=${item.deliveryTaskNumber}` +
					'&skuId=' + item.skuId + '&skuName=' + item.skuName);
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}


	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	::v-deep .u-popup {
		flex: 0 !important;
	}

	.page {
		flex: 1;
	}

	/* #endif */
	.delivery {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		// background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.print_header {
		background-color: #fff;
		// padding: 6rpx 0;
	}

	.u-alert-item {
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		// text-align: center;
		@include main_color(theme);
		font-size: 24rpx;
		padding: 0 20rpx;
	}

	.u-demo-block__content {
		flex-direction: column !important;
		// align-items: stretch;
		background-color: #fff4f3;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		// background-color: #f8f5f8;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bold;
			background-color: #FFF;
			color: #282828;
			text-align: center;
			// margin: 38rpx 0 36rpx 0;
			padding: 30rpx 0 30rpx 0;
			position: relative;
			// margin: 10rpx;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.classTitle {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			padding: 30rpx 0 30rpx 0;
			position: relative;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 28rpx;
				font-size: 30rpx;
			}
		}
	}
	
	.driver_nsure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;
	
			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}
	}
	
	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	/* 一级分类 */
	.primary {
		overflow: hidden;
		width: 100%;
		height: 900rpx;
		flex: none;
		background-color: #ffffff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			font-size: 26rpx;
			color: #1c1c1c;
			// padding: 10rpx 0;
			position: relative;
			margin: 0 20rpx;
			border-bottom: 1rpx solid #f5f5f7;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 330rpx;
				// border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fffeff;
			@include main_color(theme);

			// &::before {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	width: 8rpx;
			// 	height: 100%;
			// 	@include main_bg_color(theme);
			// }
		}
	}

	.primary .item:last-child,
	.primary .active::after {
		// display: none;
		border: none;
	}


	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	.table-head {
		margin: 30rpx;
		font-size: 26rpx;
		font-weight: bolder;

		.table_head_top {
			margin-bottom: 16rpx;

			text {
				margin-left: 20rpx;
			}

			text:first-child {
				margin-left: 0;
			}
		}

		.table_head_bottom {
			display: flex;
			justify-content: space-between;
			text {
				margin-left: 20rpx;
			}

			text:first-child {
				margin-left: 0;
			}

			.toBeDeliver {
				color: #1b6ae8;
			}
		}
	}
</style>